<%--
  Created by IntelliJ IDEA.
  User: cx
  Date: 2019/9/6
  Time: 13:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>上师列表</title>
    <link type="text/css" rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        layui.use(["table","form","layer"],function () {
            var table=layui.table;
            var form=layui.form;
            var layer=layui.layer;
            table.render({
                elem:"#myTable",
                title:"上师列表",
                url:"/cmfz/selectAllGuru",
                page:true,
                cols:[[
                    {checkbox:true},
                    {field:"guruId",title:"上师编号"},
                    {field:"guruName",title:"上师名字"},
                    {field:"guruImage",title:"上师头像",templet:function(d){return '<div><img src=${pageContext.request.contextPath}/'+d.guruImage+'></div>'}},
                    {field:"guruNickName",title:"上师法号"},
                    {field:"guruStatus",title:"状态",templet:"#guruStatusTemplet"},
                    {field:"操作",templet:"#cz"}
                ]]
            })
        })
        function  search() {
            var guruName=$("#guruName").val();
            layui.use(["table","form","layer"],function () {
                var table = layui.table;
                table.reload("myTable",{
                    where:{"guruName":guruName}
                });
            })
        }



        /*// 公共变量 有没有选择图片
        var file_upload_status = false;
        //JavaScript代码区域
        layui.use(['element','upload'], function(){
            var element = layui.element;
            var $ = layui.jquery,upload = layui.upload;

            //多文件列表示例
            var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                elem: '#testList'
                ,url: '/upload/'
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        console.info(index)
                        console.info(file)
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.code == 0){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        });*/

        // 公共变量 有没有选择图片
        var file_upload_status = false;

        // 打开添加弹窗 和 更新用的不是一个form
        function toOpenAddLayer() {
            layui.use('layer', function(){
                layer.open({
                    title:"添加新轮播图",
                    content:$("#addForm"),
                    type:1
                })
            });
        }

        //添加的文件上传组件
        layui.use('upload', function(){
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#addUpload',
                url: '${pageContext.request.contextPath}/insertGuru',
                // 1.开启多文件上传 有一个文件队列（集合）
                multiple: true,
                number:1,
                data:{
                    guruName:function(){
                        return $('#guruName1').val();
                    },
                    guruNickName:function(){
                        return $('#guruNickName').val();
                    }
                },
                //不让文件上传组件自动上传
                auto:false,
                //绑定提交按钮,让按钮决定什么时候提交
                bindAction: '#addSubMit',
                choose: function(obj){
                    //console.info("klkkk")
                    var files = this.files = obj.pushFile();
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        file_upload_status = true;
                        $('#imgdemo1').attr('src', result);//图片链接（base64）
                    });

                },done: function(res, index, upload){

                    // console.info(index);
                    layer.closeAll('page');
                    var table=layui.table;
                    table.reload("myTable");

                    file_upload_status = false;
                    $('#imgdemo1').attr('src', "");
                    delete this.files[index];
                }
            });
        });

        function add() {
            if(!file_upload_status){
                console.info("没有选择图片 可以执行ajax")
                $.ajax({
                    url:"${pageContext.request.contextPath}/insertGuru",
                    data:{
                        guruName:$("#guruName1").val(),
                        guruNickName:$("#guruNickName").val()
                    },
                    success:function (data) {
                        console.info(data)
                    }
                })
            }

        }

        /*修改开始*/
        /*function showOne(guruId){
            //获取当前行数据---发送AJAX请求,获取当前行数据
            var form=layui.form;
            $.ajax({
                url:"${pageContext.request.contextPath}/selectByGuruId",
                data:"guruId="+guruId,
                success:function(data){
                    $("#guruId").val(data.guruId);
                    $("#guruName2").val(data.guruName);
                    $("#imgdemo2").attr("src",data.guruImage);
                    $("#guruNickName1").val(data.guruNickName);
                }
            });
            //2.把数据填充到修改弹出层中--弹出层显示
            $("#updateSubMit").show();
            layui.use('layer',function(){
                layer.open({
                    title:"修改上师信息",
                    content:$("#updateForm"),
                    type:1,
                })
            });

        }
        function qwee(guruId){

        }
*/

        // 打开更新的窗口
        function toOpenUpdateLayer(id) {
            $.ajax({
                url:"${pageContext.request.contextPath}/banner/selectOne",
                data:"bannerId="+id,
                success:function(data){
                    $("#bannerId").val(data.bannerId);
                    $("#updateNannerOldName").val(data.bannerOldName);
                    $('#imgdemo2').attr('src', "${pageContext.request.contextPath}/"+data.bannerImageUrl);
                }
            });
            //2.
            layui.use('layer', function(){
                layer.open({
                    title:"修改",
                    content:$("#updateForm"),
                    type:1
                })
            });
        }

        //修改的文件上传组件
        layui.use('upload', function(){
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#addUpload1',
                url: '${pageContext.request.contextPath}/updateBanner',
                // 1.开启多文件上传 有一个文件队列（集合）
                multiple: true,
                number:1,
                data:{

                    guruId:function () {
                        return $('#guruId').val();
                    },
                    guruName:function () {
                        return $('#guruName2').val();
                    },




                },
                auto:false,
                bindAction: '#updateSubmitBtn',
                choose: function(obj){
                    var files = this.files = obj.pushFile();
                    obj.preview(function(index, file, result){
                        file_upload_status = true;
                        $('#imgdemo2').attr('src', result);
                    });

                },done: function(res, index, upload){
                    console.info(index);
                    file_upload_status = false;
                    $('#imgdemo2').attr('src', "");
                    delete this.files[index];
                }
            });
        });

        // 修改的ajax
        function update() {
            if(!file_upload_status){
                console.info("没有选择图片 可以执行ajax")
                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/updateBanner",
                    data:{
                        bannerOldName:$("#updateNannerOldName").val()
                    },
                    success:function (data) {
                        console.info(data)
                    }
                })
            }

        }

        //删除一条数据
        function doDelete(guruId) {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'], function(){
                var table = layui.table;
                layer.confirm('确定要删除嘛？', {icon: 3, title:'确认删除'}, function(index){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/deleteGuru",
                        data:"guruId="+guruId,
                        success:function(data){
                            layer.alert(data.isDelete,{time:2000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    })
                });
            });
        }




    </script>

    <script id="guruStatusTemplet" type="text/html">
        {{#  if(d.guruStatus == 0){ }}
        正常
        {{#  } else { }}
        冻结
        {{#  } }}
    </script>

    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
</head>
<body>
<div id="cz" style="display:none;">
    <button class="layui-btn layui-btn-normal" onclick="showOne('{{d.guruId}}')">修改</button>
    <button class="layui-btn layui-btn-danger" onclick="doDelete('{{d.guruId}}')">删除</button>
</div>
<button type="button" class="layui-btn" onclick="toOpenAddLayer()">
    <i class="layui-icon">&#xe608;</i> 添加上师
</button>
<button type="button" class="layui-btn layui-btn-danger" onclick="deleteAlls()">
    <i class="layui-icon">&#xe640;</i> 批量删除
</button>
<div class="layui-inline" id="search">
    <label class="layui-form-label">查询名称</label>
    <div class="layui-input-inline" style="width: 200px;">
        <input type="text" class="layui-input" id="guruName">
    </div>
    <div class="layui-input-inline" style="width: 100px;">
        <button type="button" class="layui-btn layui-btn-normal" onclick="search()">
            <i class="layui-icon layui-icon-search"></i> 搜索
        </button>
    </div>
</div>
<table id="myTable"></table>
<form class="layui-form" style="display: none" id="addForm">
   <%-- <div class="layui-form-item">
        <label class="layui-form-label">上师编号</label>
        <div class="layui-input-block">
            <input  id="guruId"  name="guruId" autocomplete="off" class="layui-input" readonly>
        </div>
    </div>--%>
    <div class="layui-form-item">
        <label class="layui-form-label">上师名字</label>
        <div class="layui-input-block">
            <input type="text" name="guruName" id="guruName1" required  lay-verify="required|guruName" autocomplete="off" class="layui-input">
        </div>
    </div>
       <div class="layui-form-item">
           <label class="layui-form-label">上师头像</label>
           <div class="layui-upload">
               <button type="button" class="layui-btn" id="addUpload">上传图片</button>
               <div class="layui-upload-list">
                   <img style="width: 100px;height: 100px" class="layui-upload-img" id="imgdemo1">
               </div>
           </div>
       </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师法号</label>
        <div class="layui-input-inline">
            <input type="text" name="guruNickName" id="guruNickName" required lay-verify="required|guruNickName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--<div class="layui-form-item">
        <label class="layui-form-label">上师状态</label>
        <div class="layui-input-inline">
            <input type="text" name="guruStatus" id="guruStatus" required lay-verify="required|guruStatus" autocomplete="off" class="layui-input">
        </div>
    </div>--%>


    <div class="layui-form-item">
        <button  type="button" lay-submit lay-filter="adds" class="layui-btn" id="addSubMit">添加</button>
<%--
        <button  type="button" lay-submit lay-filter="update" class="layui-btn" id="updateSubMit">修改</button>
--%>

        <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
<%--修改from--%>
<form class="layui-form" style="display: none" id="updateForm">
     <div class="layui-form-item">
         <label class="layui-form-label">上师编号</label>
         <div class="layui-input-block">
             <input  id="guruId"  name="guruId" autocomplete="off" class="layui-input" readonly>
         </div>
     </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师名字</label>
        <div class="layui-input-block">
            <input type="text" name="guruName" id="guruName2" required  lay-verify="required|guruName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师头像</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="addUpload1">上传图片</button>
            <div class="layui-upload-list">
                <img style="width: 100px;height: 100px" class="layui-upload-img" id="imgdemo2">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师法号</label>
        <div class="layui-input-inline">
            <input type="text" name="guruNickName" id="guruNickName1" required lay-verify="required|guruNickName" autocomplete="off" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item">
<%--
        <button  type="button" lay-submit lay-filter="adds" class="layui-btn" id="addSubMit">添加</button>
--%>
        <button  type="button" lay-submit lay-filter="update" class="layui-btn" id="updateSubMit">修改</button>

        <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>










</body>
</html>
